<template>
    <div>
        <div id="map" class="map"></div>
        <a class="xiaz" @click="downSvg" :href="downSvgUrl" :download="downSvgName">下载</a>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import cityData from './data.js'
    let chart;
    export default {
        name: "chart-map",
        data() {
            return {
                title: '质佳检测技术有限公司智能柜入驻示意图',
                subname: '2019年',
                nameColor: 'rgb(55, 75, 113)',
                name_fontSize: 18,
                subname_fontSize: 15,
                mapName: 'china',
                cityData: [],
                geoCoorMap: [],
                downSvgUrl: '',
                downSvgName: '质佳检测技术有限公司智能柜入驻示意图.svg'
            }
        },
        created() {
            this.cityData = cityData;
        },
        mounted() {
            chart = echarts.init(document.getElementById('map'), null, {renderer: 'svg'});
            this.registerMap('china');
        },
        methods: {
            downSvg () {
                const content = document.querySelector('svg').outerHTML
                const blob= new Blob([content], {type: 'xml/svg'})
                this.downSvgUrl = URL.createObjectURL(blob)
                // a.download = 'test.svg'
            },
            registerMap(name)
            {
                if (!name) name='china';
                this.$axios.get('json/'+name+'.json').then(res => {
                    echarts.registerMap('china', res.data);
                    this.mapName = name;
                    this.getGeoCoorMap();
                    this.setOptions();
                })
            },
            getGeoCoorMap()
            {
                let geoCoordMap = [];
                chart.showLoading();
                let mapFeatures = echarts.getMap(this.mapName).geoJson.features;
                chart.hideLoading();
                mapFeatures.forEach(function(v) {
                    // 地区名称
                    let name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.centroid;
                });
                this.geoCoorMap = geoCoordMap;
            },
            convertData() {
                let data = this.cityData;
                let res = [];
                for (let i = 0; i < data.length; i++) {
                    let geoCoord = this.geoCoorMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                console.log(res)
                return res;
            },
            setOptions()
            {
                let option = {
                    title: {
                        text: this.title,
                        subtext: this.subname,
                        x: 'center',
                        textStyle: {
                            color: this.nameColor,
                            fontFamily: '等线',
                            fontSize: this.name_fontSize
                        },
                        subtextStyle: {
                            fontSize: this.subname_fontSize,
                            fontFamily: '等线'
                        }
                    },
                    visualMap: {
                        show: true,
                        min: 0,
                        max: 100,
                        left: 'left',
                        top: 'bottom',
                        text: ['已入驻', '未入驻'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {
                            color: ['#302b63', '#ca0000']
                        }
                    },
                    /*工具按钮组*/
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    geo: {
                        show: true,
                        map: this.mapName,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#00467F', //区域颜色
                                borderColor: '#3B5077', // 边界颜色
                            },
                            emphasis: {
                                areaColor: '#2B91B7', //鼠标指向颜色
                            }
                        }
                    },
                    series: [{
                            name: '散点',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: this.convertData(),
                            symbolSize: function(val) {
                                return 10;
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true,
                                    fontSize: 15
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                }
                            }
                        },
                        {
                            type: 'map',
                            map: this.mapName,
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#ca0000',
                                    borderColor: '#ca0000',
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            animation: false,
                            data: this.cityData
                        }
                    ]
                };
                chart.setOption(option);
            }
        }
    }
</script>

<style scoped>
.map {
    width: 100%;
    height: 100%;
    min-height: 600px;
}
    .xiaz {
        position: fixed;
        top: 20px;
        left: 100px;
        z-index: 999;
    }
</style>